<template>
  <view>
    <!-- 关注遮罩 -->
    <!-- advanceSuccess -->
    <u-popup
      :show="advanceSuccess"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    >
      <view class="get_success">
        <image
          src="https://publish.onedaen.com/uploads/static/bg.png"
          style="position: relative; width: 100%; border-radius: 30rpx;"
        ></image>
        <view class="content">
          <view class="success_img">
            <image src="/static/get_success.png"></image>
          </view>
          <view class="success_text">
            恭喜您，关注成功！
          </view>
          <view class="get_btn" @click="myFollow()">
            <view class="get-text">前往查看</view>
          </view>
          <view class="box-close" @click="close">
            <image src="/static/close.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'followPop',
  data() {
    return {
      advanceSuccess: false, //控制打开还是不打开
    }
  },
  methods: {
    open() {
      this.advanceSuccess = true
    },
    close() {
      this.advanceSuccess = false
      this.$emit('stop')
    },
    // 查看我的关注
    myFollow() {
      uni.navigateTo({
        url: '../mine/my_follow/my_follow',
      })
    },
  },
}
</script>

<style lang="scss">
.get_success {
  position: relative;
  width: 623rpx;
  height: 310rpx;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .content {
    position: absolute;
    background-color: #fff;
    width: 100%;
    border-radius: 20rpx;
    top: -200rpx;
    justify-content: center;
    align-items: center;

    .success_img {
      width: 360rpx;
      height: 290rpx;
      margin-left: 19%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .success_text {
      margin-top: 70rpx;
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }

    .get_btn {
      width: 50%;
      height: 80rpx;
      margin: 60rpx auto;

      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      //   background-blend-mode: normal, normal;
      border-radius: 40rpx;
      border: 0;
      .get-text {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .box-close {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -120rpx;
      opacity: 0.5;
      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
}
</style>
